<template>
  <div class="sku-selector">
    <!-- 颜色选择 -->
    <div class="sku-row">
      <div class="sku-label">颜色</div>
      <div class="sku-options">
        <div
          v-for="color in skuData.colors"
          :key="color.name"
          class="sku-option color-option"
          :class="{ 
            active: selectedSku.color === color.name,
            disabled: !isSkuAvailable('color', color.name)
          }"
          @click="handleSelect('color', color.name)"
        >
          <el-image 
            class="color-image"
            :src="color.image"
            :alt="color.name"
            fit="cover"
          >
          </el-image>
          <span class="color-name">{{ color.name }}</span>
        </div>
      </div>
    </div>

    <!-- 尺寸选择 -->
    <div class="sku-row">
      <div class="sku-label">尺寸</div>
      <div class="sku-options">
        <div
          v-for="size in skuData.sizes"
          :key="size"
          class="sku-option size-option"
          :class="{ 
            active: selectedSku.size === size,
            disabled: !isSkuAvailable('size', size)
          }"
          @click="handleSelect('size', size)"
        >
          {{ size }}
        </div>
      </div>
    </div>

    <!-- 数量选择 -->
    <div class="sku-row">
      <div class="sku-label">数量</div>
      <div class="quantity-selector">
        <el-input-number 
          v-model="quantity"
          :min="1"
          :max="currentStock || 1000000"
          :disabled="!isSkuSelected"
          @change="handleQuantityChange"
        />
        <span class="stock-info" v-if="currentStock !== null">
          库存: {{ currentStock }} 件
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  // SKU 数据
  skuData: {
    type: Object,
    required: true,
    default: () => ({
      colors: [],
      sizes: [],
      skuList: []
    })
  },
  // 初始选择
  initialSku: {
    type: Object,
    default: () => ({
      skuId: '',
      color: '',
      size: '',
      image: ''
    })
  },
  // 初始数量
  initialQuantity: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['update:sku', 'update:quantity'])

// 选中的 SKU
const selectedSku = ref({
  skuId: props.initialSku.skuId,
  color: props.initialSku.color,
  size: props.initialSku.size,
  image: props.initialSku.color ? 
  props.skuData.colors.find(c => c.name === props.initialSku.color)?.image : ''
})

// 选中的数量
const quantity = ref(props.initialQuantity)

// 判断是否已选择完整 SKU
const isSkuSelected = computed(() => {
  return selectedSku.value.color && selectedSku.value.size
})

// 获取当前选中 SKU 的skuId
const currentSkuId = computed(() => {
  if (!isSkuSelected.value) return null

  const sku = props.skuData.skuList.find(
    item => item.color === selectedSku.value.color && item.size === selectedSku.value.size
  )

  return sku ? sku.skuId : null
})

// 获取当前选中 SKU 的库存
const currentStock = computed(() => {
  if (!isSkuSelected.value) return null
  
  const sku = props.skuData.skuList.find(
    item => item.color === selectedSku.value.color && 
      item.size === selectedSku.value.size
  )
  
  return sku ? sku.quantity : 0
})

// 判断 SKU 是否可选
const isSkuAvailable = (type, value) => {
  if (type === 'color') {
    if (!selectedSku.value.size) return true
    return props.skuData.skuList.some(
      item => item.color === value && 
        item.size === selectedSku.value.size && 
        item.quantity > 0
    )
  }
  
  if (type === 'size') {
    if (!selectedSku.value.color) return true
    return props.skuData.skuList.some(
      item => item.size === value && 
        item.color === selectedSku.value.color && 
        item.quantity > 0
    )
  }
  
  return false
}

// 处理 SKU 选择
const handleSelect = (type, value) => {
  if (!isSkuAvailable(type, value)) return
  
  selectedSku.value[type] = value

    // 如果是选择颜色，同时更新image
  if (type === 'color') {
    const selectedColor = props.skuData.colors.find(color => color.name === value)
    selectedSku.value.image = selectedColor ? selectedColor.image : ''
  }

  if (currentSkuId.value) {
    selectedSku.value.skuId = currentSkuId.value
  }

  // 如果库存小于当前数量，调整数量
  if (currentStock.value && quantity.value > currentStock.value) {
    quantity.value = currentStock.value
  }
  
  emit('update:sku', { ...selectedSku.value })
}

// 处理数量变化
const handleQuantityChange = (value) => {
  emit('update:quantity', value)
}
</script>

<style lang="scss" scoped>
.sku-selector {
  margin-top:20px ;
  .sku-row {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    .sku-label {
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
      margin-right: 20px;
    }
    
    .sku-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      .color-option {
        padding: 4px;  // 调整内边距
        
        .color-image {
          width: 40px;  // 调整图片大小
          height: 40px;
          border-radius: 2px;
          display: block;
          border: 1px solid #ddd;
          
          // 图片加载失败时的颜色块样式
          .color-block {
            width: 100%;
            height: 100%;
            border-radius: 2px;
          }
        }
        
        .color-name {
          display: block;
          text-align: center;
          margin-top: 4px;
          font-size: 12px;
        }
        
        &.disabled {
          .color-image {
            opacity: 0.5;
          }
        }
      }
      .sku-option {
        padding: 6px 12px;
        border: 1px solid #ddd;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover:not(.disabled) {
          border-color: #FA5566;
        }
        
        &.active {
          color: #FA5566;
          border-color: #FA5566;
        }
        
        &.disabled {
          cursor: not-allowed;
          color: #999;
          background-color: #f5f5f5;
          border-color: #ddd;
        }
      }
      
    }
    
    .quantity-selector {
      display: flex;
      align-items: center;
      gap: 15px;
      
      .stock-info {
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>